본문으로 건너뛰기

23.05.06

오늘 한 일​

  • 알고리즘 문제 풀이 2515085
  • 디지털콘텐츠기획 과제 30% 완료
  • 함수형 프로그래밍 스터디 챕터 9 읽고 정리 a3236c5
  • 익스텐션 개발
    • 애니메이션 추가(Framer Motion 적용)
    • 모달 켜졌을 때 스크롤 방지
    • vite 번들링 이슈 해결

익스텐션 개발 - vite 번들링 이슈 해결​

크롬 익스텐션에서 content script는 따로 html이 있지 않고 safe js environment에서 실행되기 때문에 dynamic import 해주어야한다. stackoverflow

vite에서 build 시 dynamic import를 지원해주는데, base를 ./로 해서 base root를 명시하고 번들링을 하면 content script를 가리키는 엔트리 파일에서 import.meta.url를 사용하고 있어서 익스텐션에서 인식을 못하는 문제가 있었다.

const __vitePreload = function preload(baseModule, deps, importerUrl) {
  //...
};

__vitePreload(
  () => import('../../../assets/js/main.096ede36.js'),
  true ? ['../../../assets/js/main.096ede36.js', '../../../assets/js/client.8f342e30.js'] : void 0,
  import.meta.url
);

importerUrl이 import.meta.url 이다. 익스텐션에서 인식하기 위해 importerUrl을 chrome.runtime.getURL()로 감싸주었다.

import type { PluginOption } from 'vite';

export default function resolveMetaChromeExtension(): PluginOption {
  return {
    name: 'resolve-meta-chrome-extension',
    resolveImportMeta: (property) => {
      if (property === 'url') {
        return 'chrome.runtime.getURL("")';
      }
    },
  };
}

이렇게 커스텀 플러그인을 만들어 적용하니 import.meta.url이 chrome.runtime.getURL("")로 변환되어 익스텐션에서도 정상적으로 동작하였다.

약간 야매로 한 느낌이 있지만 일단 파일 인식 못하는 문제는 해결했다. 하지만 아직 React.lazy를 사용해서 동적 import 시 번들링하면 엔트리 파일에 export문이 추가되어서 익스텐션에서 인식을 못하는 문제가 있다. 이 부분은 좀 더 찾아봐야겠다.

crxjs라는 라이브러리도 있던데 이걸 사용하면 위의 문제가 해결될지 궁금하다. 오픈소스를 대충 훑어봤는데 여러 커스텀 플러그인을 만들어서 적용한 것 같다. 시간날 때 한번 적용해봐서 비교해봐야겠다.

익스텐션 개발 - Framer Motion 적용​

생각보다 쉽게 구현할 수 있어서 좋았다.

모달을 여는 버튼이 작아서 어떻게 해결할지 고민했는데, 유저가 버튼에 hover했을 때 framer로 width를 늘려주어 해결했다.

<motion.div
        whileHover={{ width: '100px' }}
        className="w-[40px] h-[40px] rounded-[50px] bg-[#2F6EA2] shadow-md shadow-[#2F6EA2] cursor-pointer"
        onClick={() => setIsModalOpen(prev => !prev)}
      >
</motion.div>

그리고 껐다 킬 때의 애니메이션도 추가하여 보기 좋게 했다.

const ModalBackground = (
  { isOpen, children, className, onClick }: ModalBackgroundProps,
  ref: React.RefObject<HTMLDivElement>,
) => {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className={className}
          onClick={onClick}
          ref={ref}
        >
          {children}
        </motion.div>
      )}
    </AnimatePresence>
  );
};

익스텐션 개발 - 모달 켜졌을 때 스크롤 방지​

모달 켜졌을 때 뒷 컨텐츠의 스크롤이 움직이는 문제가 있어 body에 overflow: hidden을 주어 해결했다.

내일 할 일​

  • 알고리즘 문제 풀이
  • 디지털콘텐츠기획 과제 마무리
  • 익스텐션 개발
    • 스토리지에 데이터 저장
    • 팝업 UI 구현(옵션 기능, 피드백 링크)
  • 바닐라 js로 리액트 만드는 스터디 발표